<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>一龄快速开发平台</title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="robots" content="all,follow">
		<!-- Bootstrap CSS-->
		<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
		<!-- Font Awesome CSS-->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
		 crossorigin="anonymous">
		<!-- Google fonts - Popppins for copy-->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800">
		<!-- orion icons-->
		<link rel="stylesheet" href="index/css/orionicons.css">
		<!-- theme stylesheet-->
		<link rel="stylesheet" href="index/css/style.blue.css" id="theme-stylesheet">
		<!-- Custom stylesheet - for your changes-->
		<link rel="stylesheet" href="index/css/custom.css">
		<!-- Favicon-->
		<link rel="shortcut icon" href="index/img/favicon.png?3">


		<link type="text/css" href="css/phone.css" rel="stylesheet">
		<link type="text/css" href="module/modulestyle.css" rel="stylesheet">
		<style>
			::-webkit-scrollbar {/*滚动条整体样式*/
			width: 0px;     /*高宽分别对应横竖滚动条的尺寸*/
		}
	</style>
		<!-- Tweaks for older IEs-->
		<!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
	</head>

	<body>
		<!-- navbar-->
		<header class="header">
			<nav class="navbar navbar-expand-lg px-4 py-2 bg-white shadow"><a href="#" class="sidebar-toggler text-gray-500 mr-4 mr-lg-5 lead"><i
					 class="fas fa-align-left">
					</i></a><a href="index.html" class="navbar-brand font-weight-bold text-uppercase text-base">快速开发平台</a>
				<ul class="ml-auto d-flex align-items-center list-unstyled mb-0">
					<li class="nav-item">
						<form id="searchForm" class="ml-auto d-none d-lg-block">
							<div class="form-group position-relative mb-0">
								<button type="submit" style="top: -3px; left: 0;" class="position-absolute bg-white border-0 p-0"><i class="o-search-magnify-1 text-gray text-lg"></i></button>
								<input type="search" placeholder="搜索 ..." class="form-control form-control-sm border-0 no-shadow pl-4">
							</div>
						</form>
					</li>
					<li class="nav-item dropdown ml-auto"><a id="userInfo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
						 class="nav-link dropdown-toggle">
							<img src="index/img/avatar-6.jpg" alt="Jason Doe" style="max-width: 2.5rem;" class="img-fluid rounded-circle shadow"></a>
						<div aria-labelledby="userInfo" class="dropdown-menu"><a href="#" class="dropdown-item"><strong class="d-block text-uppercase headings-font-family">Mark
									Stephen</strong>
								<small>Web Developer</small></a>
							<div class="dropdown-divider"></div><a href="#" class="dropdown-item">Settings</a><a href="#" class="dropdown-item">Activity
								log </a>
							<div class="dropdown-divider"></div><a href="login.html" class="dropdown-item">Logout</a>
						</div>
					</li>
				</ul>
			</nav>
		</header>
		<div class="d-flex align-items-stretch">
			<div id="sidebar" class="sidebar py-3">
				<div class="text-gray-400 text-uppercase px-3 px-lg-4 py-4 font-weight-bold small headings-font-family">菜单</div>
				<ul class="sidebar-menu list-unstyled">
					<li class="sidebar-list-item"><a href="index.html" class="sidebar-link text-muted"><i class="o-home-1 mr-3 text-gray"></i><span>首页</span></a></li>
					<li class="sidebar-list-item"><a href="#" data-toggle="collapse" data-target="#ProductPages" aria-expanded="false"
						 aria-controls="ProductPages" class="sidebar-link text-muted">
							<i class="o-sales-up-1 mr-3 text-gray"></i><span>项目管理</span></a>
						<div id="ProductPages" class="collapse">
							<ul class="sidebar-menu list-unstyled border-left border-primary border-thick">
								<li class="sidebar-list-item"><a href="project-mng.html" class="sidebar-link text-muted pl-lg-5">项目管理</a></li>
								<li class="sidebar-list-item"><a href="project-chat.html" class="sidebar-link text-muted pl-lg-5">报表管理</a></li>
								<li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted pl-lg-5">人员权限</a></li>
								<li class="sidebar-list-item"><a href="#" class="sidebar-link text-muted pl-lg-5">系统设置</a></li>
							</ul>
						</div>
					</li>
					<li class="sidebar-list-item"><a data-toggle="collapse" data-target="#pages" aria-expanded="false" aria-controls="false"
						 class="sidebar-link text-muted">
							<i class="o-table-content-1 mr-3 text-gray"></i><span>快速开发</span></a>
						<div id="pages" class="collapse show">
							<ul class="sidebar-menu list-unstyled border-left border-primary border-thick">
								<li class="sidebar-list-item"><a class="sidebar-link text-muted pl-lg-5 active">电商项目</a></li>
								<li class="sidebar-list-item"><a href="fast-pc.html" class="sidebar-link text-muted pl-lg-5">PC项目</a></li>
								<li class="sidebar-list-item"><a href="fast-flow-chat.html" class="sidebar-link text-muted pl-lg-5">流程图</a></li>
							</ul>
						</div>
					</li>
					<li class="sidebar-list-item"><a href="file-mng.html" class="sidebar-link text-muted"><i class="o-wireframe-1 mr-3 text-gray"></i><span>模板文件</span></a></li>
				</ul>
			</div>
			<div class="page-holder w-100 d-flex flex-wrap">
				<div class="container-fluid px-xl-5">

					<section class="py-5">
						<div class="row">
							<div class="col-lg-4 mb-4">
								<div class="card" style="height: 900px;">
									<div class="card-header">
										<h6 class="text-uppercase mb-0">基础组件</h6>
									</div>
									<div class="draggable-div">
										<!--布局组件-->
										<ul class="list-group">
											<h3><em></em>轮播图</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">

														<div id="card" class="banner-box">
															<div class="bd">
																<ul>
																	<li>
																		<a href="javascript:void(0);"><img src="http://images.yilingboshi.com/ejsimage/M00/00/94/rBB7hV3vYU-AEQw7AAPXU_bwb1c997.png" /></a>
																	</li>
																	<li>
																		<a href="javascript:void(0);"><img src="http://images.yilingboshi.com/ejsimage/M00/00/1E/rBB7g12EO6-APNFxAATVLZDVEak252.png" /></a>
																	</li>
																</ul>
															</div>
															<div class="banner-btn">
																<div class="hd">
																	<ul></ul>
																</div>
															</div>
														</div>

													</div>
												</li>
											</h6>

											<h3><em></em>列表</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">
														<div id="card2" class="menu-list">

														</div>
													</div>
													<!-- <button onclick="ShowCreateModal('#card2')" type="button" class="btn btn-info"
													style="margin-top: 20px;margin-left: 150px">配置列表</button> -->
												</li>
											</h6>

											<h3><em></em>商品列表</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">

														<div id="card3" class="menu-list">
															<div class="goodsList">
																<div class="goodsList_item">
																	<img src="http://images.yilingboshi.com/ejsimage//M00/00/22/rBB7hV0t4yuAWsDvAAGi8nrnM0E598.jpg" alt="">
																	<h4>幸乐氨糖鲨鱼软骨素</h4>
																	<b>￥ 480</b>
																</div>
																<div class="goodsList_item">
																	<img src="http://images.yilingboshi.com/ejsimage//M00/00/22/rBB7hV0t4yuAWsDvAAGi8nrnM0E598.jpg" alt="">
																	<h4>幸乐氨糖鲨鱼软骨素</h4>
																	<b>￥ 480</b>
																</div>
															</div>
														</div>

													</div>
													<!-- <button onclick="ShowCreateModal(3)" type="button" class="btn btn-info"
													style="margin-top: 20px;margin-left: 150px">配置列表</button> -->
												</li>
											</h6>

											<h3><em></em>搜索</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">
														<div id="card4" class="menu-list">
															<div class="search">
																<div class="search_box">
																	<svg t="1577236253817" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2695"
																	 width="16" height="16">
																		<path d="M786.526717 741.354961C854.696182 662.757733 895.951115 560.184449 895.951115 447.975557 895.951115 200.565489 695.38561 0 447.975557 0 200.565505 0 0 200.565489 0 447.975557 0 695.385626 200.565505 895.951115 447.975557 895.951115 560.143357 895.951115 662.682626 854.726372 741.268611 786.60159L969.314056 1014.647016C981.684069 1027.017029 1002.126281 1027.199073 1014.622368 1014.702978 1027.205585 1002.119763 1027.093431 981.921653 1014.566403 969.394653L786.526717 741.354961 786.526717 741.354961 786.526717 741.354961 786.526717 741.354961 786.526717 741.354961 786.526717 741.354961 786.526717 741.354961ZM447.975557 831.954606C235.909784 831.954606 63.996508 660.04133 63.996508 447.975557 63.996508 235.909784 235.909784 63.996508 447.975557 63.996508 660.04133 63.996508 831.954606 235.909784 831.954606 447.975557 831.954606 660.04133 660.04133 831.954606 447.975557 831.954606L447.975557 831.954606 447.975557 831.954606 447.975557 831.954606 447.975557 831.954606 447.975557 831.954606 447.975557 831.954606Z"
																		 p-id="2696" fill="#999999"></path>
																	</svg>
																	<span>可搜索商品编号或名称</span>
																</div>
															</div>
														</div>

													</div>
												</li>
											</h6>

											<h3><em></em>菜单盒子</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">
														<div id="card5" class="menu-list">
															<div class="menubox">
																<div>
																	<img src="http://wx.yilingboshi.com/resources/wechat/img/f_image/order@2x.png" alt="">
																	<span>商品订单</span>
																</div>
																<svg t="1577237491824" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3347"
																 width="28" height="28">
																	<path d="M380.00271 802.681382c-7.782244 0-15.558347-3.007497-21.436218-9.005095-11.602246-11.836583-11.410887-30.838356 0.427742-42.439578l243.519246-238.665705-243.519246-238.665705c-11.838629-11.602246-12.029988-30.602995-0.427742-42.440601 11.602246-11.837606 30.602995-12.027941 42.439578-0.426719l265.388323 260.098853c5.760191 5.644557 9.005095 13.370519 9.005095 21.434172s-3.244904 15.789615-9.005095 21.434172L401.00607 794.103006C395.166061 799.826358 387.581316 802.681382 380.00271 802.681382z"
																	 p-id="3348" fill="#333333"></path>
																</svg>
															</div>
														</div>

													</div>
												</li>
											</h6>

											<h3><em></em>我的头部</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">
														<div id="card6" class="menu-list">
															<div class="user_perinfo">
																<img src="http://wx.yilingboshi.com/resources/wechat/img/tx_empty.png" alt="">
																<span>16601131272</span>
															</div>
														</div>

													</div>
												</li>
											</h6>
											<h3><em></em>分类</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">
														<div id="card7" class="menu-list">
															<div class="menu-classify">
																<div class="menu-classify_left">
																	<p>中老年健康</p>
																	<p>美丽产品</p>
																	<p>都市健康</p>
																	<p>女性健康</p>
																	<p>男性健康</p>
																	<p>使用人群</p>
																	<p>基础营养</p>
																	<p>红酒</p>
																</div>
																<div class="menu-classify_right">
																	<div class="menu-classify_right_list">
																		<div class="menu-classify_right_item">
																			<i style="background-image: url(http://images.yilingboshi.com/ejsimage//M00/00/00/rBB7g1zankKAanHcAACSkNfEIj8811.png)"></i>
																			<h5>强化心脏</h5>
																		</div>
																		<div class="menu-classify_right_item">
																			<i style="background-image: url(http://images.yilingboshi.com/ejsimage//M00/00/00/rBB7g1zankKAanHcAACSkNfEIj8811.png)"></i>
																			<h5>强化心脏</h5>
																		</div>
																		<div class="menu-classify_right_item">
																			<i style="background-image: url(http://images.yilingboshi.com/ejsimage//M00/00/00/rBB7g1zankKAanHcAACSkNfEIj8811.png)"></i>
																			<h5>强化心脏</h5>
																		</div>
																		<div class="menu-classify_right_item">
																			<i style="background-image: url(http://images.yilingboshi.com/ejsimage//M00/00/00/rBB7g1zankKAanHcAACSkNfEIj8811.png)"></i>
																			<h5>强化心脏</h5>
																		</div>
																		<div class="menu-classify_right_item">
																			<i style="background-image: url(http://images.yilingboshi.com/ejsimage//M00/00/00/rBB7g1zankKAanHcAACSkNfEIj8811.png)"></i>
																			<h5>强化心脏</h5>
																		</div>
																		<div class="menu-classify_right_item">
																			<i style="background-image: url(http://images.yilingboshi.com/ejsimage//M00/00/00/rBB7g1zankKAanHcAACSkNfEIj8811.png)"></i>
																			<h5>强化心脏</h5>
																		</div>
																	</div>

																</div>
															</div>
														</div>

													</div>
												</li>
											</h6>
											<h3><em></em>商品选择</h3>
											<h6>
												<li class="list-item draggable-item">
													<div class="drag-card">
														<div id="card8" class="menu-list">
															<div class="select_goods">
																<i></i>
																<img src="http://images.yilingboshi.com/ejsimage//M00/00/23/rBB7hV0t5BGAdTxrAAGm4atBoGY484.jpg" alt="">
																<div class="select_goods_item">
																	<h5>首选营养褪黑素</h5>
																	<div class="select_goods_caozuo">
																		<b>￥149.00</b>
																		<div class="select_goods_caozuo_box">
																			<span>-</span>
																			<b>1</b>
																			<span>+</span>
																		</div>
																	</div>
																</div>

															</div>
														</div>
													</div>
												</li>
											</h6>
										</ul>

									</div>

								</div>
							</div>
							<div class="col-lg-4 mb-4">
								<div class="card" style="height: 900px;">
									<div class="card-header">
										<h6 class="text-uppercase mb-0">手机界面(16:9)</h6>
									</div>
									<div class="content-div skyblue-br" style="margin-top: 60px;">
										<!--开始显示新布局-->
										<div id="contentDragDiv" class="content-drag" style="height: 100%;">

										</div>
									</div>

								</div>
							</div>

							<div class="col-lg-4 mb-4">
								<div class="card" style="height: 900px;">
									<div class="card-header">
										<h6 class="text-uppercase mb-0">项目文件 </h6>
									</div>
									<div style="margin: 20px;text-align: center;">
										<button type="button" onclick="showHTML()" class="btn btn-success">生成代码</button>
										<button type="button"  data-toggle="modal" data-target="#downHtmlDialog" class="btn btn-info" style="margin-left: 20px;">保存文件</button>
										<!-- Modal-->
										<div id="downHtmlDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade text-left">
											<div role="document" class="modal-dialog">
												<div class="modal-content">
													<div class="modal-header">
														<h4 id="exampleModalLabel" class="modal-title">输入项目名称</h4>
														<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
													</div>
													<div class="modal-body">
														<div class="form-group">
															<label></label>
															<input type="text" id="htmlNameEt" placeholder="名称不带后缀" class="form-control">
														</div>
													</div>
													<div class="modal-footer">
														<button type="button" data-dismiss="modal" class="btn btn-secondary">关闭</button>
														<button type="button" id="htmlNameSub" class="btn btn-primary">确认</button>
													</div>
												</div>
											</div>
										</div>
									</div>
									<textarea id="htmlText" style="height: 700px;margin-left: 10%;margin-right: 10%;border:1px solid #ddd;"></textarea>

								</div>
							</div>
						</div>
					</section>


					<div class="modal fade" id="setListItem" role="dialog" aria-labelledby="setListItemLabel" aria-hidden="true">
						<div class="modal-dialog" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<h5 class="modal-title" id="createFileTitle">这个是配置数据的弹窗</h5>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</div>
								<div class="modal-body">
									<form>
										<div class="form-group">
											<label for="fileName" class="col-form-label">输入每行有几个</label>
											<input type="text" autofocus class="form-control" id="fileName">
										</div>
									</form>
								</div>
								<div class="modal-footer">
									<button type="button" data-target="#setListItem" class="btn btn-primary" id="createFileSureBut">确定</button>
								</div>
							</div>
						</div>
					</div>

				</div>
				<footer class="footer bg-white shadow align-self-end py-3 px-xl-5 w-100">
					<div class="container-fluid">
						<div class="row">
							<div class="col-md-6 text-center text-md-left text-primary">
								<p class="mb-2 mb-md-0"></p>
							</div>
							<div class="col-md-6 text-center text-md-right text-gray-400">
								<p class="mb-0"></p>
							</div>
						</div>
					</div>
				</footer>
			</div>
		</div>
		<!-- JavaScript files-->
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<!-- <script src="vendor/popper.js/umd/popper.min.js"> </script> -->
		<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>
		<!-- <script src="vendor/jquery.cookie/jquery.cookie.js"> </script> -->
		<!-- <script src="https://cdn.bootcss.com/Chart.js/2.7.2/Chart.min.js"></script> -->
		<!-- <script src="js/js.cookie.min.js"></script> -->
		<!-- <script src="js/charts-home.js"></script> -->
		<!-- <script src="js/front.js"></script> -->

		<script src="js/jq/jquery-ui.js"></script>

		<!--组件js-->
		<script src="module/banner/jquery.SuperSlide.2.1.1.js"></script>
		<script src="module/module.js"></script>
		<script src="js/phone.js"></script>
		<script>
			$(".list-group").slide({
				titCell: "h3",
				targetCell: "h6",
				defaultIndex: 7,
				effect: "slideDown",
				delayTime: 300,
				trigger: "click"
			});
			new card2List(4, '#card2')
			

			$('#htmlNameSub').click(function(){
				var fileName = document.getElementById('htmlNameEt').value;
				console.log(fileName);
				if (fileName.length > 0) {
					saveHtml(fileName);
				} else{
					alert("名称不能是空的")
				}
			});
				
			function saveHtml(fileName){
				showHTML();
				var v = document.getElementById('htmlText').value;
				var b = new Blob([v]);
				var href = URL.createObjectURL(b);

				var link = document.createElement('a');
				link.setAttribute("download", fileName + ".html");
				link.href = href;
				link.click();
			}
		
		</script>

	</body>

</html>
